<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('订单详情列表')" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <input id="barCode" type="text" name="goodsTax"/>
                <a id="submit" class="btn btn-success" shiro:hasPermission="hx:detail:add">
                    <i class="fa fa-plus"></i> 提交
                </a>
                <!--演示获取缓存中的字典数据-->
                <a id="submit2" class="btn btn-success" shiro:hasPermission="hx:detail:add">
                    <i class="fa fa-plus"></i> 获取缓存字典
                </a>
            </div>

            <div class="col-sm-12 select-table table-striped">
                <table id="bootstrap-table"></table>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('hx:detail:edit')}]];
        var removeFlag = [[${@permission.hasPermi('hx:detail:remove')}]];
        var prefix = ctx + "hx/detail";

        $(function() {
            var options = {
                //开启下角标
                showFooter:true,
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'id',
                        title: '商品id',
                        visible: false
                    },
                    {
                        field: 'name',
                        title: '商品名称',
                        //在下角标（最后一行）显示总数
                        footerFormatter : function () {

                            return "合计";
                        }
                    },
                    {
                        field: 'price',
                        title: '商品单价'
                    },
                    {
                        field: 'goodsCount',
                        title: '购买数量',

                        //在下角标（最后一行）显示总数
                        footerFormatter : function (data) { 
                            let  titel = 0;
                            for (let i = 0 ; i < data.length ; i ++) {
                                titel += data[i].goodsCount;
                            }
                            return titel;
                        }
                    },
                    {
                        field: 'goodsTotalMoney',
                        title: '总价钱',
                        //计算此列的值
                        footerFormatter: function(rows){
                            var sum = 0;
                            for (var i=0;i<rows.length;i++) {
                                sum += rows[i].goodsTotalMoney
                            }
                            return sum;
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
/*                        formatter: function(value, row, index) {
                            var actions = [];
                            actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.goodsId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                            actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.goodsId + '\')"><i class="fa fa-remove"></i>删除</a>');
                            return actions.join('');
                        }*/
                    }
                    ]
            };

//提交表单
            $("#bootstrap-table").bootstrapTable(options)

            /*设置定时器*/
            let timer;
            //绑定输入框
            $("#barCode").keydown(function (event) {
                //console.log(event)
                //js的防抖与节流
                /*清除定时器,
                当第二个键盘数据输入，且在第一个一秒还没执行时。
                清除定时器，使的第一次的数据不发送，最终只发送输入完后，过去一秒发送。*/
                clearTimeout(timer)
                //开启定时器，一秒后发送
                timer = setTimeout(function () {
                    $.post( "/hx/goods/listNoPage" , { barCode : $("#barCode").val() } , function (data) {
                        if (data.length === 0 ){
                            $.modal.msgError("没有找到这个商品");
                        }else{
                            /*添加购买数量*/
                            data[0].goodsCount = 1;
                            /*添加该商品的总价钱*/
                            data[0].goodsTotalMoney = data[0].goodsCount * data[0].price
                            //append 是在bootstrap table官网里找到的将数据放到表单中的方法
                            $("#bootstrap-table").bootstrapTable("append",data[0])
                        }
                        /*提交之后，清空input框内信息*/
                        $("#barCode").val("")
                    } );
                    timer = null;
                },1000)


            })


            $("#submit").click(function () {

                /*添加提示框，点击确定之后在执行方法*/
                $.modal.confirm("确定要提交吗？",function () {

                    let data = $("#bootstrap-table").bootstrapTable("getData");
                    var goodsList = unique(data,"id").map(item => { return { goodsId:item.id , goodsName:item.name , goodsPrice:item.price , goodsCount:item.goodsCount , goodsTotalMoney : item.goodsTotalMoney }})
                    $.ajax({
                        url:'/hx/detail/saveOrder',
                        type:'post',
                        contentType:'application/json;charset=utf-8',
                        dataType: 'json',
                        //数据不能传递对象，这里要将对象转化为json字符串
                        data : JSON.stringify(goodsList),
                        /*成功之后，返回信息*/
                        success: function (data) {
                            if (data.code === 0){
                                $.modal.msgSuccess(data.msg)
                                /*成功之后将表格数据删除*/
                               // $("#bootstrap-table").bootstrapTable("removeAll")
                            }else {
                                $.modal.msgError(data.msg)
                            }
                        }
                    })
                })

            })

            /*因为现在是要生成订单详情，相同的一个商品只可以出现一次（数目可以多添加），所以这里要将重复的id只提交一次。*/
            function unique(data,field){
                let newData = [];
                for (let i = 0 ; i < data.length ; i ++){
                    let index = newData.map(item => item[field]).indexOf(data[i][field]);
                    if (index === -1){
                        newData.push(data[i]);
                    }
                }
                return newData;
            }

            /*获取缓存中字典数据*/
            $("#submit2").click(function () {
                $.post("/hx/detail/getDict",{dataType:$("#barCode").val()},function (data) {
                    console.log(data)

                })
                
            })
        });
    </script>
</body>
</html>